<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--  <link rel="stylesheet" href="/docs/css/bootstrap.min.css" /> -->
  <link rel="stylesheet" href="/docs/css/bootstrap-flatly.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/site.css" />
  <!--<link rel="stylesheet" href="/release/ui-grid-unstable.css" />-->
  <style>
    .compiled-css {
      height: 280px;
    }
  </style>
  <script>
    function outerHTML(node){
        // if IE, Chrome take the internal method otherwise build one
        return node.outerHTML || (
          function(n){
              var div = document.createElement('div'), h;
              div.appendChild(n);
              h = div.innerHTML;
              div = null;
              return h;
          })(node);
    }

    var l = document.createElement('link');
    l.rel = 'stylesheet';
    if (window.location.href.match('ui-grid.info')) {
      l.href = '/release/ui-grid-unstable.css';
    }
    else {
      l.href = '/release/ui-grid.css';
    }
    document.write(outerHTML(l));
  </script>
</head>
<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="nav navbar-header">
      <a href="/" class="navbar-brand">UI Grid</a>
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Learn
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="/docs/#/api">Docs</a>
            </li>
            <li>
              <a href="/docs/#/tutorial">Tutorial</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="navbar-header navbar-right">
      <p class="navbar-text hidden-phone">
        <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=watch&count=true"
              allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
        <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ng-grid&type=fork&count=true"
              allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
      </p>
    </div>
  </div>

  <div ng-cloak class="container-fluid" id="customizerApp" ng-controller='Main'>
    <br>

    <h1 class="text-center">Grid Customizer</h2>
    <br>

    <div class="row">
      <div class="col-md-12">
        <span class="col-xs-12 alert alert-warning text-center">
          NOTE: The customizer currently only works with LESS defined for the core.
          Less for the features are not currently compiled into the included download.
          <br>
          We are open to Pull Requests that fix this problem.
        </span>
      </div>
      <div class="col-md-12">
        <button type="button" class="btn btn-success" ng-click="resetVariables()">Reset Variables</button>
        &nbsp;
        &nbsp;
        <button type="button" class="btn btn-primary" ng-click="showDownload = true">Download CSS</button>

        <div class="pull-right">
          <strong>Theme:</strong>
          <div class="btn-group" ng-show="themes.length">
            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
              {{ theme || 'default' | capitalize }}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#" ng-click="setTheme()">Default</a>
              </li>

              <li ng-repeat="theme in themes">
                <a href="#" ng-click="setTheme(theme)">
                  {{ theme | capitalize }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <br>

    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-6 col-md-8">
          <form>
            <div class="col-sm-12 col-md-6 col-lg-4" ng-repeat="v in variables track by $index">
              <label for="{{ v.name }}" class="muted">{{ v.name }}</label> <input id="{{ v.name }}" type="text" class="form-control" ng-model="v.value" ng-change="updateCSS()">
            </div>
          </form>
        </div>
        <div class="col-xs-6 col-md-4">
          <div data-spy="affix" data-offset-top="0">
            <style>
              .grid {
                width: 400px;
                height: 300px;
              }
            </style>

            <style ui-grid-style>
              {{ css }}
            </style>

            <div class="grid" ui-grid="gridOptions"></div>
          </div>
        </div>
        <div class="col-xs-6 col-md-8">
          <form>
            <label for="customLess">Custom Less</label>
            <textarea class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>
          </form>
        </div>
      </div>

      <div class="text-error">{{ cssErr }}</div>

      <br>
      <br>
    </div>

    <div ng-cloak ng-show="showDownload" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="showDownload = false">&times;</button>
            <h3>Download CSS</h3>
          </div>
          <div class="modal-body">
            <button class="btn btn-success" ng-click="updateCSS(!compress)">{{ compress ? "Display Full" : "Display Minified" }}</button>
            &nbsp;
            &nbsp;
            <p class="modal-message">
              <strong>Size:</strong> {{ cssSize() }}
            </p>

            <textarea hover-select row="20" class="compiled-css col-xs-12" readonly>{{ css }}</textarea>
            <p class="modal-message">
              Hover then copy and paste the CSS.
            </p>
            <!-- <button class="btn btn-success" data-clipboard-text="{{ css }}">Copy to Clipboard</button> -->
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" ng-click="showDownload = false">Close</a>
          </div>
        </div>
      </div>
    </div>

    <br>
    <br>
    <br>

    <!-- <div style="min-height: 4000px"></div> -->
  </div>

  <script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
  }
  </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>

  <!--
  <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.2.3/ZeroClipboard.js"></script>
  <script>
    // ZeroClipboard.config( { moviePath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.2.3/ZeroClipboard.swf' } );
    var client = new ZeroClipboard({ moviePath: 'http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.2.3/ZeroClipboard.swf' });
  </script>
  -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!--  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

  <script>
    var s = document.createElement('script');
    if (window.location.href.match('ui-grid.info')) {
      s.src = '/release/ui-grid-unstable.js';
    }
    else {
      // s.src = 'http://ui-grid.info/release/ui-grid-unstable.js';// '/release/ui-grid.js';
      s.src = '/release/ui-grid.js';
    }

    var customizerScript = document.createElement('script');
    customizerScript.src = '/js/customizer.js';

    customizerScript.onload = function() {
      angular.bootstrap(document.getElementById('customizerApp'), ['customizer']);
    }

    s.onload = function() {
      // document.write(outerHTML(customizerScript));
      document.getElementsByTagName('head')[0].appendChild(customizerScript);
    }

    // document.write(outerHTML(s));
    document.getElementsByTagName('head')[0].appendChild(s);
  </script>

  <!--<script src="/js/customizer.js"></script>-->
</body>
</html>
